<template>
  <div class="topic-container">
    <compHeader></compHeader>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="topic-item" v-for="item in list" :key="item.id">
          <div class="img">
            <img :src="item.scene_pic_url" alt="" />
          </div>
          <div class="desc">
            <p class="van-ellipsis title">{{ item.title }}</p>
            <p class="van-ellipsis subtitle">{{ item.subtitle }}</p>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <compTabbar></compTabbar>
  </div>
</template>

<script>
import { getTopicData } from "@/request/api";
import compHeader from "@/components/compHeader.vue";
import compTabbar from "@/components/compTabbar.vue";
export default {
  components: {
    compTabbar,
    compHeader,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,

      currentPage: 1,
      pageSize: 0,
      totalPages: 0,
    };
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.currentPage++;
      this.loading = true;
      this.getData();
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.refreshing = false;
        this.finished = false;
        this.currentPage = 1;
        this.list = [];
        this.getData();
      }, 500);
    },
    getData() {
      getTopicData({
        page: this.currentPage,
        size: this.pageSize,
      }).then((res) => {
        if (res.errno == 0) {
          let { data, pageSize, totalPages } = res.data;
          if (this.currentPage == 1) {
            this.list = data;
          } else {
            this.list = this.list.concat(data);
          }

          if (data.length < this.pageSize) {
            this.finished = true;
            this.currentPage = this.totalPages;
            return;
          }
          this.loading = false;
          this.refreshing = false;
          this.pageSize = pageSize;
          this.totalPages = totalPages;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.topic-container {
  padding-bottom: 65px;
  padding-top: 55px;
}
.topic-item {
  width: 100%;
  height: 120px;
  display: flex;
  background-color: #fff;
  margin-top: 10px;
  .img {
    flex: 1 0 30%;
    img {
      height: 100%;
      width: 100%;
      border-radius: 10px;
    }
  }
  .desc {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    // align-items: center;
    padding: 5px;
    p {
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p.title {
      font-weight: bold;
    }
    .subtitle {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>